"use client";

import { motion } from "framer-motion";
import { projectsData } from './data/projects';
import { useState } from 'react';

interface ProjectsProps {
  setSelectedProject: (project: any) => void;
  setIsModalOpen: (isOpen: boolean) => void;
}

export const Projects = ({ setSelectedProject, setIsModalOpen }: ProjectsProps) => {
  const handleProjectClick = (project: any) => {
    setSelectedProject(project);
    setIsModalOpen(true);
    document.body.style.overflow = 'hidden';
  };

  return (
    <div className="w-full max-w-7xl mx-auto px-4">
      <h2 className="text-4xl font-bold text-center mb-10">项目展示</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {projectsData.subSections.slice(0, 9).map((project) => (
          <motion.div
            key={project.id}
            whileHover={{ scale: 1.03 }}
            className="bg-white rounded-xl shadow-md overflow-hidden cursor-pointer"
            onClick={() => handleProjectClick(project)}
          >
            <div className="p-6">
              <h3 className="text-xl font-bold mb-2">{project.name}</h3>
              <div className="flex flex-wrap gap-2 mb-4">
                {project.tech.split(", ").map((tech, index) => (
                  <span
                    key={`${project.id}-tech-${index}`}
                    className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded"
                  >
                    {tech}
                  </span>
                ))}
              </div>
              <p className="text-gray-600 line-clamp-3">{project.description}</p>
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  );
};